<template>
  <div class="person">
    姓：<input type="text" v-model.trim="firstName" /><br />
    名：<input type="text" v-model.trim="lastName" />
    <button @click="changeFullName">将全名改为 li-si</button><br />
    <div>姓名：{{ fullName }}</div>
    <div>姓名：{{ fullName }}</div>
    <div>姓名：{{ fullName2() }}</div>
    <div>姓名：{{ fullName2() }}</div>
  </div>
</template>

<script setup lang="ts" name="Person">
import { computed, ref } from "vue";

let firstName = ref("zhang");
let lastName = ref("san");

// 方法实现
function fullName2() {
  // 方法执行时没有缓存，调用一次就执行一次
  console.log("方法执行了");
  return (
    firstName.value.charAt(0).toUpperCase() +
    firstName.value.slice(1) +
    "-" +
    lastName.value
  );
}

// 计算属性实现 (这样定义的计算属性只可读，不可修改)
/* let fullName = computed(() => {
  // 计算属性存在缓存，只有当依赖计算的数据发生变化时才重新计算
  console.log("computed执行了");
  return (
    firstName.value.charAt(0).toUpperCase() +
    firstName.value.slice(1) +
    "-" +
    lastName.value
  );
});
console.log(fullName); // ComputedRefImpl 计算属性返回值为一个响应式ref对象
// fullName.value = "newName"; // 无法为value赋值，因为它是只读的 */

// 计算属性实现(这样定义的计算属性是可读可写的)
let fullName = computed({
  get() {
    return (
      firstName.value.charAt(0).toUpperCase() +
      firstName.value.slice(1) +
      "-" +
      lastName.value
    );
  },
  set(val) {
    console.log(val); // val:计算属性被修改为的值
    // 修改计算属性依赖计算的属性值,实现计算属性值的修改
    [firstName.value, lastName.value] = val.split("-");
  },
});

function changeFullName() {
  fullName.value = "li-si"; // 修改计算属性的值时,调用computed中的set方法
}
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
li {
  font-size: 20px;
}
</style>
